import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import { APP_YELLOW, APP_BLACK } from '../../../../constant/color';

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'rgba(42, 42, 42, 0.9)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10
  },
  content: {
    width: phonePx(420),
    height: phonePx(277),
    backgroundColor: '#ffffff',
    borderRadius: phonePx(8),
    alignItems: 'center'
  },
  titleContent: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: phonePx(50)
  },
  line: {
    width: phonePx(8),
    height: phonePx(80),
    backgroundColor: APP_BLACK
  },
  desc: {
    fontSize: phonePx(14),
    lineHeight: phonePx(20),
    fontWeight: '500',
    color: APP_BLACK,
    marginTop: phonePx(30)
  },
  students: {
    marginTop: phonePx(32),
    height: phonePx(97),
    justifyContent: 'center'
  },
  loadStudents: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: phonePx(16)
  },
  item: {
    alignItems: 'center'
  },
  loadVideo: {
    alignItems: 'center',
    marginHorizontal: phonePx(8),
    borderRadius: phonePx(4),
    overflow: 'hidden'
  },
  video: {
    width: phonePx(72),
    height: phonePx(72)
  },
  empty: {
    width: phonePx(72),
    height: phonePx(72)
  },
  name: {
    fontSize: phonePx(12),
    color: APP_BLACK,
    lineHeight: phonePx(17),
    marginTop: phonePx(4),
    width: phonePx(72),
    textAlign: 'center'
  },
  doingName: {
    marginTop: phonePx(2)
  },
  icon: {
    width: phonePx(15),
    height: phonePx(15)
  },
  mask: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: phonePx(72),
    height: phonePx(72),
    backgroundColor: 'rgba(rgba(42, 42, 42, 0.3)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 20
  },
  maskDesc: {
    fontSize: phonePx(10),
    color: '#fff',
    fontWeight: '600'
  },
  confirm: {
    position: 'absolute',
    bottom: phonePx(30),
    width: phonePx(110),
    height: phonePx(40),
    borderRadius: phonePx(25),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: APP_YELLOW
  },
  confirmDesc: {
    fontSize: phonePx(14),
    fontWeight: '600',
    color: APP_BLACK
  },
  doing: {
    borderWidth: phonePx(2),
    borderColor: '#FFEA6F',
    marginTop: -phonePx(2)
  }
});
